<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">/*
 * Copyright (c) 2016 VUI(https://git.oschina.net/durcframework/vui) All rights reserved.
 */

;(function(){


var winHeight = $(window).height();
var globalId = 0;



function getTpl(id) {
	var tpl = 
	'&lt;div id=&quot;'+id+'&quot;&gt;'+
		'&lt;table class=&quot;tab-table&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;&gt;'+
			'&lt;tr&gt;'+
				'&lt;td id=&quot;'+id+'_tree&quot; class=&quot;dl-second-nav&quot; valign=&quot;top&quot;&gt;&lt;/td&gt;'+
				'&lt;td class=&quot;dl-second-body&quot; valign=&quot;top&quot;&gt;' +
					'&lt;div class=&quot;cont-title&quot; id=&quot;'+buildContTitleId(id)+'&quot;&gt;&lt;/div&gt;' +
					'&lt;iframe width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;' +
				'&lt;/td&gt;'+
			'&lt;/tr&gt;'+
		'&lt;/table&gt;'+
	'&lt;/div&gt;';
	
	return tpl;
}

function buildContTabId(id) {
	return id + &quot;_contTab&quot;;
}
function buildContTitleId(id) {
	return id + &quot;_contTitle&quot;;
}

<span id='VUI-Layout'>/**
</span> * 页面布局&lt;br&gt;
 * &lt;pre&gt;
var config = 
[
	{
	    id:'permission',
	    text:'系统管理',
	    menu:[{
	        text:'权限管理',
	        children:[
	          {id:'user',text:'用户管理',href:'https://www.baidu.com'}
	          ,{id:'role',text:'角色管理',href:'http://www.csdn.net'}
	          ,{id:'resMgr',text:'资源管理',href:'permission/resMgr.jsp'}
	          ,{id:'group',text:'用户组管理',href:'permission/group.jsp'}
	        ]
	      }
	    ]
	}             
   ,{
       id:'menu', 
       text:'业务管理',
       homePage : 'orderInfo',
       menu:[{
           text:'首页内容',
           children:[
             {id:'orderInfo',text:'订单管理',href:'http://www.soso.com',closeable : false}
           ]
         }
       ]
	}
];
new VUI.Layout({config:config});
 * &lt;/pre&gt;
 * @class VUI.Layout
 * @extends VUI.Common
 */
VUI.Class('Layout',{
	OPTS:{
		renderId:'tab'
		,config:null
	}
<span id='VUI-Layout-method-constructor'>	/**
</span>	 * 构造函数
	 * @constructor
	 */
	,init:function(opts) {
		this._super(opts);
		this.build(this.opts.config);
	}
<span id='VUI-Layout-method-build'>	/**
</span>	 * 构建数据
	 */
	,build:function(config) {
		var tabItems = this.getTabItems(config);
		
		new VUI.Tab({
			renderId:this.opt('renderId')
			,items:tabItems
		});
	}
<span id='VUI-Layout-method-getTabItems'>	/**
</span>	 * @private
	 */
	,getTabItems:function(config) {
		var tabItems = [];
	
		for(var i=0, len=config.length;i&lt;len; i++) {
			var cfg = config[i];
			var id = this.createTabContent(cfg);
			var item = {title:cfg.text,contentId:id};
			tabItems.push(item);
		}
		
		return tabItems;
	}
<span id='VUI-Layout-method-createTabContent'>	/**
</span>	 * @private
	 */
	,createTabContent:function(cfg) {
		var tabRenderId = 'tab_' + (cfg.id || globalId++);
		var treeRenderId = tabRenderId + '_tree';
		var tpl = getTpl(tabRenderId);
		var contTitleId = buildContTitleId(tabRenderId);
		
		$('body').append(tpl);
		
		//var contTab = this.createContTab(contTabId);
		
		var $tab = $('#'+tabRenderId);
		var $table = $tab.find('table');
		var $frame = $tab.find('iframe');
		var $title = $('#'+contTitleId).hide();
		
		$table.height(winHeight-64);
		$frame.height(winHeight-104);
		
		this.createTree(cfg,treeRenderId,$frame,$title);
		
		return tabRenderId;
	}
	,createContTab:function(id) {
		var frameId = id + '_frame';
		var tab = new VUI.Tab({
			renderId:id
			,autoHide:true
			,items:[
				{content:'&lt;iframe id=&quot;'+frameId+'&quot; width=&quot;100%&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;',checked:true}
			]
		});
		tab.opt('frameId',frameId);
		return tab;
	}
<span id='VUI-Layout-method-createTree'>	/**
</span>	 * @private
	 */
	,createTree:function(cfg,treeRenderId,$frame,$title) {
		var that = this;
		new VUI.Tree({
			renderId:treeRenderId
			,data:cfg.menu
			,clickToggle:true
			,onSelect:function(e){
				var item = e.item;
				that.runOptFun('itemFilter',item);
				var openHandler = that.opt('openHandler');
				if(openHandler) {
					openHandler($frame,item,$title);
					return;
				}
				
				if(item.blank) {
					window.open(item.href);				
				}else{
					if(item.href) {
						$title.html(item.text).show();
						$frame.attr('src',item.href);
					}
				}
			}
		});
	}
},VUI.Common);

})();</pre>
</body>
</html>
